<template>
  <a-input-search
    class="search"
    placeholder="请输入专家姓名、专家领域进行搜索"
    enter-button="搜索"
    @search="handleSearch"
  >
  </a-input-search>
  <Table :tableProps="tableProps" @tableChange="handleTableChange" />
</template>
<script lang="ts" setup>
import { nextTick, onMounted, ref } from "vue";
import { getExpertColumns } from "../config";
import { Key } from "ant-design-vue/es/_util/type";
import { getReviewer, assignReviewer } from "@/api";
import { useTableData } from "@/hooks";
import Table from "@/components/Table.vue";
import { message } from "ant-design-vue";
const props = defineProps<{
  record: Record<string, any>;
  instance: { current: any };
}>();
const emit = defineEmits<{ update: [] }>();
const filterData = ref<{ keyword: string }>({ keyword: "" });
const selectedRowKeys = ref<Key[]>([]);
const onSelectChange = (keys: Key[]) => {
  selectedRowKeys.value = keys;
};
const { tableProps, handleTableChange } = useTableData(getReviewer, filterData);
tableProps.columns = getExpertColumns();
if (tableProps.pagination) tableProps.pagination.pageSize = 100000;
tableProps.rowSelection = {
  type: "radio",
  fixed: true,
  selectedRowKeys: selectedRowKeys,
  onChange: onSelectChange,
};
onMounted(() => {
  nextTick(() => {
    props.instance.current.update({
      onOk: () => {
        return new Promise((resolve, reject) => {
          if (!selectedRowKeys.value.length) {
            message.error("请选择专家");
            reject();
          } else {
            assignReviewer({
              approveUserId: selectedRowKeys.value[0] as number,
              projectId: props.record.id,
            })
              .then((res) => {
                emit("update");
                resolve(res);
              })
              .catch(() => {
                reject();
              });
          }
        });
      },
    });
  });
});
const handleSearch = (val: string) => {
  filterData.value.keyword = val;
};
</script>
<style lang="scss" scoped>
.search {
  margin-bottom: 16px;
}
</style>
